<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form模块</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../resource/css/layui.css">
	<link rel="stylesheet" href="../resource/css/common.css">
	<link rel="stylesheet" href="../resource/css/index2.css">
</head>
<body>
	<form class="layui-form form1" method="get" action="">

		<div class="layui-form-item">
			<label class="layui-form-label custom-fs16">文本框：</label>
			<div class="layui-input-block">
		      	<input type="text" name="account" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input custom-fs16">
		    </div>
		</div>

		<div class="layui-form-item">
		    <label class="layui-form-label custom-fs16">密码框：</label>
		    <div class="layui-input-inline">
		      	<input type="password" name="password" required lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input custom-fs16">
		    </div>
	    	<div class="layui-form-mid layui-word-aux custom-fs16">说些什么呢</div>
	  	</div>

	  	<div class="layui-form-item">
	    	<label class="layui-form-label custom-fs16">下拉列表：</label>
	    	<div class="layui-input-block custom-fs16">
	      		<select name="city" lay-verify="required">
			        <option value=""></option>
			        <option value="1">南京</option>
	      		</select>
	    	</div>
	  	</div>
	
		<div class="layui-form-item">
		    <label class="layui-form-label custom-fs16">复选框：</label>
		    <div class="layui-input-block">
		      	<input type="checkbox" name="like[write]" title="写作">
		      	<input type="checkbox" name="like[read]" title="阅读" checked>
		      	<input type="checkbox" name="like[dai]" title="发呆">
		    </div>
		</div>

		<div class="layui-form-item">
		    <label class="layui-form-label custom-fs16">开关：</label>
		    <div class="layui-input-block">
		    	<!-- lay-skin="primary" -->
		      	<input type="checkbox" name="switch" lay-skin="switch">
		    </div>
		</div>

		<div class="layui-form-item">
		    <label class="layui-form-label custom-fs16">单选框：</label>
		    <div class="layui-input-block">
		      	<input type="radio" name="sex" value="男" title="男">
		      	<input type="radio" name="sex" value="女" title="女" checked>
		    </div>
		</div>

		<div class="layui-form-item layui-form-text">
		    <label class="layui-form-label custom-fs16">文本域：</label>
		    <div class="layui-input-block">
		      	<textarea name="desc" placeholder="请输入内容" class="layui-textarea custom-fs16" rows="5"></textarea>
		    </div>
		</div>

		<div class="layui-form-item">
		    <div class="layui-input-block">
		      	<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		      	<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
		<div class="layui-form-item">
			<div class="custom-whole">
				<label class="layui-form-label custom-fs16 custom-width-auto">数字验证</label>
			    <div class="layui-input-inline">
			      	<input type="text" name="account" required lay-verify="required|number" placeholder="请输入数字" autocomplete="off" class="layui-input custom-fs16">
			    </div>
		    </div>

		    <div class="custom-whole">
			    <label class="layui-form-label custom-fs16 custom-width-auto">邮箱验证</label>
			    <div class="layui-input-inline">
			      	<input type="text" name="account" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input custom-fs16">
			    </div>
			</div>
			
			<div class="custom-whole">
			    <label class="layui-form-label custom-fs16 custom-width-auto">手机号验证手机号验证</label>
			    <div class="layui-input-inline">
			      	<input type="text" name="account" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input custom-fs16">
			    </div>
			</div>
			
			<div class="custom-whole">
			    <label class="layui-form-label custom-fs16 custom-width-auto">网址验证网址验证</label>
			    <div class="layui-input-inline">
			      	<input type="text" name="account" required lay-verify="required|url" placeholder="请输入网址" autocomplete="off" class="layui-input custom-fs16">
			    </div>
			    </div>

		    <div class="custom-whole">
			    <label class="layui-form-label custom-fs16 custom-width-auto">日期验证</label>
			    <div class="layui-input-inline">
			      	<input id="date" type="text" name="account" required lay-verify="required|date" placeholder="请输入日期" autocomplete="off" readonly class="layui-input custom-fs16">
			    </div>
		    </div>

		    <div class="custom-whole">
			    <label class="layui-form-label custom-fs16 custom-width-auto">身份证验证</label>
			    <div class="layui-input-inline">
			      	<input type="text" name="account" required lay-verify="required|identity" placeholder="请输入身份证" autocomplete="off" class="layui-input custom-fs16">
			    </div>
		    </div>

		</div>
	</form>

	<script src="../resource/js/layui.js"></script>
	<script>
		layui.use(['element','form','laydate'], function() {
			var element = layui.element;				// element.init();
			var form 	= layui.form;					// form.render();
			var laydate = layui.laydate;
			var layer   = layui.layer || parent.window.mod.layer;
			var $ 		= layui.$ || parent.window.mod.jquery;

			parent.window.resizeIframe(window.frameElement,document.getElementsByTagName('html')[0]);

			// 动态追加select下拉选项
			var selectCity = document.querySelector('select[name=city]');
			var frgm = document.createDocumentFragment();
			frgm = '<option value='+ selectCity.childElementCount +'>成都</option>';
			$(selectCity).append(frgm);
			form.render();	// 表单更新

			// 日期控件
			var date = laydate.render({
			  	elem: '#date'
			  	,value: new Date()
			  	,min: '2016-10-14'
			  	,max: '2036-10-14'
			  	,btns: ['confirm']
			  	,ready: function(){
			    	date.hint('日期可选值设定在 <br> 2016-10-14 到 2036-10-14');
			  	}
			});

			form.verify({	// 自定义验证方法
		        pass: [
		            /^[\S]{6,12}$/,
		            '密码必须6到12位，且不能出现空格'
		        ]
			});
		});
	</script>
</body>
</html>